import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import AddonInput from '../common/AddonInput';

class Header extends React.Component{
    constructor(props){
        super();
        this.state = {
            moreContentStatus: false,
        }
        this.clickGetMore = this.clickGetMore.bind(this);
    }
    clickGetMore(e){
        //let _that = this;
        this.setState({
            moreContentStatus: !this.state.moreContentStatus,
        });
    }
    render(){
        const {moreContentStatus} = this.state;
        const moreContentStyle = {
            display: moreContentStatus?'block':'none'
        };
        return(
            <div className='App-header'>
                <div className='App-header-content'>
                    <div className='header-leftwrap'>
                        <a href="javacript:void(0);" className='header-item site-sign'>网站标志</a>
                        <a href="javacript:void(0);" className='header-item'>首页</a>
                        <a href="javacript:void(0);" className='header-item'>发现</a>
                        <a href="javacript:void(0);" className='header-item'>最新</a>
                        <div className='header-item header-more' 
                            onMouseOver ={this.clickGetMore}
                            onMouseOut ={this.clickGetMore}>
                            <div className='header-moretitle'>更多</div>
                            <div className='header-morecontent' style={moreContentStyle}>
                                123333
                            </div>
                        </div>
                        {/*<div className='header-item' onClick={this.clickGetMore.bind(this, '更多')}>更多</div>*/}
                        <AddonInput icon='search'></AddonInput>
                    </div>
                    <div className='header-rightwrap'>
                        <div className='header-item shoppingcart-wrap'>
                            {/*此处必须引用fontawesome-free-solid，如此全局可使用icon='' */}
                            <FontAwesomeIcon icon='shopping-cart'></FontAwesomeIcon>
                            <span>&nbsp;购物车</span>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

// const Header = ()=>{
//     return (<div className='App-header'></div>);
// }

export default Header;